<template>
  <el-dialog :close-on-click-modal="closeonclickmodal" width="500px" :title="getdialogTitle()" @open="listenopen()"
             @close="close"
             :visible="dialogshow">
    <div :id="target">
      <div style="max-height:300px;min-height:150px;overflow-y: auto">
          <el-tag v-for="(x,index) in ownPerm" :key="index" class="item" style="vertical-align: middle;float:left;">
            {{x.desc}}
          </el-tag>
      </div>
      <div>
        <el-row style="text-align: right">
          <el-button size="mini" type="primary" @click="close">确 定</el-button>
        </el-row>
      </div>
    </div>
    <div style="margin-top:20px"></div>
  </el-dialog>
</template>
<script>
  import {Message} from "element-ui"
  export default {
    inject: ["reload"],
    data() {
      return {
        target:"showRolePerms",
        ownPerm: [],
        isajax: false,
        closeonclickmodal: true,
        formLabelWidth: '80px'
      }
    },
    props: ['dialogshow', 'dialoginfo'],
    methods: {
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.getAllRolePermsByRoleId});
        this.proAPI.getJson(this.proAPI.URLS.getAllRolePermsByRoleId, {roleId: this.dialoginfo.id}).then((res) => {
            this.ownPerm = res.data;
        })
      },
      getdialogTitle() {
        return "【" + this.dialoginfo.name + "】角色权限列表";
      },
      listenopen() {
        // console.log("弹窗打开了");
        this.init();
      },
      close() {
        this.$emit('changedialogshow')
      }
    },
    updated() {
      // console.log(333);
    },
    mounted() {
      this.init();
      // console.log("开始创建！！！！！！！！");
    }
  };
</script>
<style lang="css">
  .el-dialog__body {
    padding: 10px 20px 1px 20px;
    color: #606266;
    font-size: 14px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin:8px;
  }


</style>
